Frontend Unumdorligini Ochish: Resource Timing API'ga Chuqur Sho'ng'ish

Veb-ishlab chiqish olamida tezlik shunchaki bir xususiyat emas; bu ijobiy foydalanuvchi tajribasi uchun asosiy talabdir. Sekin yuklanadigan veb-sayt foydalanuvchilarning tezda chiqib ketishiga (bounce rates), past darajadagi jalb qilinishiga va pirovardida biznes maqsadlariga salbiy ta'sir ko'rsatishi mumkin. Lighthouse va WebPageTest kabi vositalar bebaho yuqori darajadagi diagnostikani taqdim etsa-da, ular ko'pincha bitta, sintetik testni ifodalaydi. Global auditoriya uchun unumdorlikni chinakam tushunish va optimallashtirish uchun biz haqiqiy foydalanuvchilarning tajribasini ularning qurilmalarida, ularning tarmoqlarida o'lchashimiz kerak. Aynan shu yerda Haqiqiy Foydalanuvchi Monitoringi (RUM) ishga tushadi va uning eng kuchli vositalaridan biri bu Resource Timing API'dir.

Ushbu keng qamrovli qo'llanma sizni Resource Timing API'ga chuqur sho'ng'itadi. Biz uning nima ekanligini, qanday ishlatilishini va uning donador ma'lumotlarini ilovangizning yuklanish unumdorligini keskin yaxshilaydigan amaliy tushunchalarga qanday aylantirishni o'rganamiz. Tajribali frontend muhandisi bo'lasizmi yoki unumdorlikni optimallashtirish sayohatingizni endi boshlayapsizmi, ushbu maqola sizni sahifangizdagi har bir aktivning tarmoq unumdorligini tahlil qilish va tushunish uchun bilimlar bilan qurollantiradi.

Resource Timing API nima?

Resource Timing API — bu veb-sahifa yuklab oladigan har bir resurs uchun batafsil tarmoq vaqtlari ma'lumotlarini taqdim etuvchi brauzerga asoslangan JavaScript API'dir. Buni sahifangizning tarmoq faoliyati uchun mikroskopik linza deb o'ylang. Har bir rasm, skript, uslublar jadvali, shrift va API chaqiruvi ( `fetch` yoki `XMLHttpRequest` orqali) uchun ushbu API tarmoq so'rovining har bir bosqichi uchun yuqori aniqlikdagi vaqt belgisini oladi.

U ilovangiz unumdorligining yaxlit ko'rinishini ta'minlash uchun birgalikda ishlaydigan kattaroq Unumdorlik API'lari to'plamining bir qismidir. Navigation Timing API asosiy hujjatning hayotiy sikliga e'tibor qaratsa, Resource Timing API asosiy hujjat so'raydigan barcha bog'liq resurslarga e'tibor qaratadi.

Nima uchun u bunchalik muhim?

• Donadorlik: U yagona "sahifa yuklanish vaqti" metrikasidan tashqariga chiqadi. Siz ma'lum bir uchinchi tomon skripti yoki muhim qahramon tasviri uchun DNS qidiruvi, TCP ulanishi va kontentni yuklab olish qancha vaqt olganini aniq ko'rishingiz mumkin.
• Haqiqiy foydalanuvchi ma'lumotlari: Laboratoriyaga asoslangan vositalardan farqli o'laroq, ushbu API foydalanuvchilaringiz brauzerlarida ishlaydi. Bu sizga turli xil tarmoq sharoitlari, qurilmalar va geografik joylashuvlardan unumdorlik ma'lumotlarini to'plash imkonini beradi, bu sizga global foydalanuvchi tajribangizning haqiqiy rasmini beradi.
• Amaliy tushunchalar: Ushbu ma'lumotlarni tahlil qilish orqali siz aniq muammolarni aniqlay olasiz. Uchinchi tomon tahlil skripti ulanishda sekinmi? Sizning CDN'ingiz ma'lum bir mintaqada past unumdorlik ko'rsatyaptimi? Rasmlaringiz juda kattami? Resource Timing API ushbu savollarga ishonch bilan javob berish uchun zarur dalillarni taqdim etadi.

Resurs Yuklanishining Anatomiyasi: Vaqt Jadvalini Tahlil Qilish

Resource Timing API'ning yadrosi `PerformanceResourceTiming` ob'ektidir. Har bir yuklangan resurs uchun brauzer ushbu ob'ektlardan birini yaratadi, u ko'plab vaqt va hajm ma'lumotlarini o'z ichiga oladi. Ushbu ob'ektlarni tushunish uchun yuklash jarayonini sharshara diagrammasi sifatida tasavvur qilish foydalidir, bunda har bir qadam avvalgisidan keyin keladi.

`PerformanceResourceTiming` ob'ektining asosiy xususiyatlarini ko'rib chiqamiz. Barcha vaqt qiymatlari sahifa navigatsiyasi boshlanishidan (`performance.timeOrigin`) millisekundlarda o'lchanadigan yuqori aniqlikdagi vaqt belgilaridir.

startTime -> fetchStart -> domainLookupStart -> domainLookupEnd -> connectStart -> connectEnd -> requestStart -> responseStart -> responseEnd

Asosiy Vaqt Xususiyatlari

• name: Resursning URL manzili. Bu sizning asosiy identifikatoringiz.
• entryType: Unumdorlik yozuvi turini ko'rsatuvchi satr. Bizning maqsadlarimiz uchun bu har doim "resource" bo'ladi.
• initiatorType: Bu nosozliklarni tuzatish uchun juda foydali. Bu sizga resurs qanday so'ralganini aytadi. Umumiy qiymatlar 'img', 'link' (CSS uchun), 'script', 'css' (`@import` kabi CSS ichidan yuklangan resurslar uchun), 'fetch' va 'xmlhttprequest' ni o'z ichiga oladi.
• duration: Resurs uchun sarflangan umumiy vaqt, `responseEnd - startTime` sifatida hisoblanadi. Bu bitta resurs uchun yuqori darajadagi metrikadir.
• startTime: Resursni yuklash boshlanishidan oldingi vaqt belgisi.
• fetchStart: Brauzer resursni yuklashni boshlashidan oldingi vaqt belgisi. U tarmoqqa o'tishdan oldin keshlarni (HTTP keshi, Service Worker keshi) tekshirishi mumkin. Agar resurs keshdan olingan bo'lsa, keyingi vaqt qiymatlarining ko'pi nolga teng bo'ladi.
• domainLookupStart & domainLookupEnd: Bular DNS (Domen Nomlari Tizimi) qidiruvining boshlanishi va tugashini belgilaydi. Davomiylik (`domainLookupEnd - domainLookupStart`) domen nomini IP-manzilga aylantirish uchun ketgan vaqtni bildiradi. Bu yerdagi yuqori qiymat sekin DNS provayderini ko'rsatishi mumkin.
• connectStart & connectEnd: Bular serverga ulanishni o'rnatishning boshlanishi va tugashini belgilaydi. HTTP uchun bu TCP uch tomonlama qo'l siqishidir. Davomiylik (`connectEnd - connectStart`) sizning TCP ulanish vaqtingizdir.
• secureConnectionStart: Agar resurs HTTPS orqali yuklangan bo'lsa, ushbu vaqt belgisi SSL/TLS qo'l siqishining boshlanishini belgilaydi. Davomiylik (`connectEnd - secureConnectionStart`) shifrlash muzokaralari qancha vaqt olganini ko'rsatadi. Sekin TLS qo'l siqishlari serverning noto'g'ri sozlanishi yoki tarmoq kechikishining belgisi bo'lishi mumkin.
• requestStart: Brauzer resurs uchun haqiqiy HTTP so'rovini serverga yuborishidan oldingi vaqt belgisi. `connectEnd` va `requestStart` orasidagi vaqt ko'pincha "so'rov navbati" vaqti deb ataladi, bunda brauzer mavjud ulanishni kutadi.
• responseStart: Brauzer serverdan javobning birinchi baytini olgan vaqtdagi vaqt belgisi. Davomiylik (`responseStart - requestStart`) mashhur Birinchi Baytgacha Bo'lgan Vaqt (TTFB)'dir. Yuqori TTFB deyarli har doim sekin backend jarayoni yoki server tomonidagi kechikishning ko'rsatkichidir.
• responseEnd: Resursning oxirgi bayti qabul qilingan va so'rov muvaffaqiyatli yopilgan vaqtdagi vaqt belgisi. Davomiylik (`responseEnd - responseStart`) kontentni yuklab olish vaqtini ifodalaydi.

Resurs Hajmi Xususiyatlari

Resurs hajmini tushunish vaqtni tushunish kabi muhimdir. API uchta asosiy metrikalarni taqdim etadi:

• transferSize: Tarmoq orqali uzatilgan resursning baytlardagi hajmi, shu jumladan sarlavhalar va siqilgan javob tanasi. Agar resurs keshdan olingan bo'lsa, bu ko'pincha 0 bo'ladi. Bu foydalanuvchining ma'lumotlar rejasiga va tarmoq vaqtiga bevosita ta'sir qiladigan raqamdir.
• encodedBodySize: Yuk tanasining siqishdan (masalan, Gzip yoki Brotli) keyin, lekin ochishdan oldingi baytlardagi hajmi. Bu sizga sarlavhalardan alohida, yukning o'z hajmini tushunishga yordam beradi.
• decodedBodySize: Yuk tanasining siqilmagan, asl shaklidagi baytlardagi hajmi. Buni `encodedBodySize` bilan taqqoslash sizning siqish strategiyangizning samaradorligini ochib beradi. Agar bu ikki raqam matnga asoslangan aktiv (JS, CSS yoki HTML kabi) uchun juda yaqin bo'lsa, siqishingiz to'g'ri ishlamayotgan bo'lishi mumkin.

Server Vaqtlari

Resource Timing API bilan eng kuchli integratsiyalardan biri bu `serverTiming` xususiyatidir. Sizning backend'ingiz maxsus HTTP sarlavhasida (`Server-Timing`) unumdorlik metrikalarini yuborishi mumkin va bu metrikalar tegishli `PerformanceResourceTiming` ob'ektidagi `serverTiming` massivida paydo bo'ladi. Bu frontend va backend unumdorligini monitoring qilish orasidagi bo'shliqni to'ldiradi, bu sizga ma'lumotlar bazasi so'rovlari vaqtlari yoki API ishlov berish kechikishlarini to'g'ridan-to'g'ri frontend ma'lumotlaringizda ko'rish imkonini beradi.

Masalan, backend ushbu sarlavhani yuborishi mumkin:

Server-Timing: db;dur=53, api;dur=47.2, cache;desc="HIT"

Bu ma'lumotlar `serverTiming` xususiyatida mavjud bo'lib, sizga yuqori TTFB'ni backend'dagi ma'lum bir sekin jarayon bilan bog'lash imkonini beradi.

JavaScript'da Resurs Vaqtlari Ma'lumotlariga Qanday Murojaat Qilish Mumkin

Endi biz mavjud ma'lumotlarni tushunganimizdan so'ng, uni JavaScript yordamida yig'ishning amaliy usullarini ko'rib chiqamiz. Ikkita asosiy usul mavjud.

1-usul: `performance.getEntriesByType('resource')`

Bu boshlashning eng oddiy usuli. Bu usul chaqiruv vaqtida sahifada allaqachon yuklab bo'lingan resurslar uchun barcha `PerformanceResourceTiming` ob'ektlarining massivini qaytaradi.

            
// Aksariyat resurslar olinishini ta'minlash uchun sahifa yuklanishini kuting
window.addEventListener('load', () => {
  const resources = performance.getEntriesByType('resource');

  resources.forEach((resource) => {
    console.log(`Resurs yuklandi: ${resource.name}`);
    console.log(` - Umumiy vaqt: ${resource.duration.toFixed(2)}ms`);
    console.log(` - Tashabbuskor: ${resource.initiatorType}`);
    console.log(` - Uzatish hajmi: ${resource.transferSize} bayt`);
  });
});

            

              
                Copy
              
            
          

Cheklov: Bu usul vaqtning bir lahzasini aks ettiradi. Agar siz uni juda erta chaqirsangiz, hali yuklanmagan resurslarni o'tkazib yuborasiz. Agar ilovangiz dastlabki sahifa yuklanishidan ancha keyin resurslarni dinamik ravishda yuklasa, siz bu usulni qayta-qayta chaqirishingiz kerak bo'ladi, bu esa samarasizdir.

2-usul: `PerformanceObserver` (Tavsiya etilgan yondashuv)

PerformanceObserver bu unumdorlik yozuvlarini yig'ishning zamonaviyroq, mustahkamroq va samaraliroq usulidir. Siz ma'lumotlarni so'rash o'rniga, brauzer yangi yozuvlarni mavjud bo'lishi bilan sizning kuzatuvchi qayta chaqiruvingizga yuboradi.

Nima uchun u yaxshiroq:

• Asinxron: U asosiy oqimni bloklamaydi.
• Keng qamrovli: U sahifa yuklanishining boshidanoq yozuvlarni qamrab oladi, bu esa resurs yuklanib bo'lganidan keyin skript ishga tushadigan poyga sharoitlaridan qochadi.
• Samarali: U `setTimeout` yoki `setInterval` bilan so'rov yuborish zaruratini yo'qotadi.

Bu standart amalga oshirish:

            
try {
  const observer = new PerformanceObserver((list) => {
    list.getEntries().forEach((entry) => {
      // Har bir resurs yozuvini kelishi bilan qayta ishlang
      if (entry.entryType === 'resource') {
        console.log(`Resurs kuzatildi: ${entry.name}`);
        console.log(` - Birinchi Baytgacha Vaqt (TTFB): ${(entry.responseStart - entry.requestStart).toFixed(2)}ms`);
      }
    });
  });

  // 'resource' yozuvlarini kuzatishni boshlang.
  // 'buffered' bayrog'i kuzatuvchimiz yaratilishidan oldin yuklangan yozuvlarni olishimizni ta'minlaydi.
  observer.observe({ type: 'resource', buffered: true });

  // Agar kerak bo'lsa, keyinroq kuzatishni to'xtatishingiz mumkin
  // observer.disconnect();
} catch (e) {
  console.error('PerformanceObserver bu brauzerda qo\'llab-quvvatlanmaydi.');
}

            

              
                Copy
              
            
          

buffered: true opsiyasi juda muhim. U kuzatuvchiga brauzerning unumdorlik yozuvlari buferida allaqachon mavjud bo'lgan barcha `resource` yozuvlarini darhol yuborishni buyuradi, bu sizga boshidan to'liq ro'yxatni olishingizni ta'minlaydi.

Unumdorlik Buferini Boshqarish

Brauzerlarda ular saqlaydigan resurs vaqtlari yozuvlarining standart chegarasi mavjud (odatda 150). Juda murakkab sahifalarda bu bufer to'lib qolishi mumkin. Bu sodir bo'lganda, brauzer `resourcetimingbufferfull` hodisasini ishga tushiradi va yangi yozuvlar qo'shilmaydi.

Siz buni quyidagicha boshqarishingiz mumkin:

1. Bufer hajmini oshirish: Yuqoriroq chegara o'rnatish uchun `performance.setResourceTimingBufferSize(limit)` dan foydalaning, masalan, 300.
2. Buferni tozalash: Yozuvlarni qayta ishlaganingizdan so'ng yangilariga joy bo'shatish uchun `performance.clearResourceTimings()` dan foydalaning.

            
performance.addEventListener('resourcetimingbufferfull', () => {
  console.warn('Resurs vaqtlari buferi to\'ldi. Tozalanmoqda...');
  // Avval kuzatuvchingizdagi mavjud yozuvlarni qayta ishlang
  // Keyin buferni tozalang
  performance.clearResourceTimings();
  // Agar bu tez-tez sodir bo'lsa, bufer hajmini qayta sozlashingiz kerak bo'lishi mumkin
  // performance.setResourceTimingBufferSize(500);
});

            

              
                Copy
              
            
          

Amaliy Foydalanish Holatlari va Amalga Oshiriladigan Tushunchalar

Ma'lumotlarni yig'ish faqat birinchi qadamdir. Haqiqiy qiymat bu ma'lumotlarni amaliy yaxshilanishlarga aylantirishdadir. Keling, ba'zi umumiy unumdorlik muammolarini va Resource Timing API ularni hal qilishga qanday yordam berishini ko'rib chiqamiz.

1-holat: Sekin Uchinchi Tomon Skriptlarini Aniqlash

Muammo: Tahlil, reklama, mijozlarni qo'llab-quvvatlash vidjetlari va A/B testlari uchun uchinchi tomon skriptlari unumdorlikni pasaytiruvchi mashhur omillardir. Ular sekin yuklanishi, renderlashni bloklashi va hatto beqarorlikka olib kelishi mumkin.

Yechim: Haqiqiy foydalanuvchilaringizga ushbu skriptlarning ta'sirini ajratib olish va o'lchash uchun Resource Timing API'dan foydalaning.

            
const observer = new PerformanceObserver((list) => {
  const thirdPartyScripts = list.getEntries().filter(entry => 
    entry.initiatorType === 'script' && 
    !entry.name.startsWith(window.location.origin)
  );

  thirdPartyScripts.forEach(script => {
    if (script.duration > 200) { // Chegarani belgilang, masalan, 200ms
      console.warn(`Sekin uchinchi tomon skripti aniqlandi: ${script.name}`, {
        duration: `${script.duration.toFixed(2)}ms`,
        transferSize: `${script.transferSize} bayt`
      });
      // Haqiqiy RUM vositasida siz bu ma'lumotlarni tahlil backend'ingizga yuborasiz.
    }
  });
});

observer.observe({ type: 'resource', buffered: true });

            

              
                Copy
              
            
          

Amaliy tushunchalar:

• Yuqori davomiylik: Agar skript doimiy ravishda uzoq davom etsa, uning haqiqatan ham zarurligini o'ylab ko'ring. Uning funksionalligini yanada samaraliroq alternativ bilan almashtirish mumkinmi?
• Yuklash strategiyasi: Skript sinxron ravishda yuklanyaptimi? Sahifaning renderlanishini bloklamaslik uchun `<script>` tegida `async` yoki `defer` atributlaridan foydalaning.
• Tanlab joylashtirish: Skriptni shartli ravishda, faqat u mutlaqo zarur bo'lgan sahifalarda yuklash mumkinmi?

2-holat: Tasvir Yetkazib Berishni Optimallashtirish

Muammo: Katta, optimallashtirilmagan tasvirlar, ayniqsa cheklangan tarmoq o'tkazuvchanligiga ega mobil qurilmalarda sahifalarning sekin yuklanishining eng keng tarqalgan sabablaridan biridir.

Yechim: Resurs yozuvlarini `initiatorType: 'img'` bo'yicha filtrlang va ularning hajmi va yuklanish vaqtlarini tahlil qiling.

            
// ... PerformanceObserver qayta chaqiruvi ichida ...
list.getEntries()
  .filter(entry => entry.initiatorType === 'img')
  .forEach(image => {
    const downloadTime = image.responseEnd - image.responseStart;
    // Katta tasvir yuqori yuklanish vaqtiga va katta transferSize'ga ega bo'lishi mumkin
    if (downloadTime > 500 || image.transferSize > 100000) { // 500ms yoki 100KB
      console.log(`Potentsial katta tasvir muammosi: ${image.name}`, {
          downloadTime: `${downloadTime.toFixed(2)}ms`,
          transferSize: `${(image.transferSize / 1024).toFixed(2)} KB`
      });
    }
  });

            

              
                Copy
              
            
          

Amaliy tushunchalar:

• Yuqori `transferSize` va `downloadTime`: Bu tasvirning juda katta ekanligining aniq belgisidir. Uni WebP yoki AVIF kabi zamonaviy formatlardan foydalanib, mos ravishda siqib va ko'rsatiladigan o'lchamlariga o'zgartirib optimallashtiring.
• `srcset` dan foydalaning: Foydalanuvchining ko'rish maydoniga qarab turli o'lchamdagi tasvirlarni taqdim etish uchun `srcset` atributidan foydalanib moslashuvchan tasvirlarni amalga oshiring.
• Kechiktirilgan yuklash: Ko'rinish maydonidan pastdagi tasvirlar uchun ularni foydalanuvchi ko'rish maydoniga aylantirguncha yuklashni kechiktirish uchun `loading="lazy"` dan foydalaning.

3-holat: Tarmoq Muammolarini Tashxislash

Muammo: Ba'zan muammo resursning o'zida emas, balki unga olib boradigan tarmoq yo'lida bo'ladi. Sekin DNS, kechikuvchi ulanishlar yoki ortiqcha yuklangan serverlar unumdorlikni pasaytirishi mumkin.

Yechim: Kechikish manbasini aniqlash uchun `duration` ni uning tarkibiy bosqichlariga bo'lib chiqing.

            
function analyzeNetworkPhases(resource) {
  const dnsTime = resource.domainLookupEnd - resource.domainLookupStart;
  const tcpTime = resource.connectEnd - resource.connectStart;
  const ttfb = resource.responseStart - resource.requestStart;
  const downloadTime = resource.responseEnd - resource.responseStart;

  console.log(`${resource.name} uchun tahlil`);
  if (dnsTime > 50) console.warn(` - Yuqori DNS vaqti: ${dnsTime.toFixed(2)}ms`);
  if (tcpTime > 100) console.warn(` - Yuqori TCP ulanish vaqti: ${tcpTime.toFixed(2)}ms`);
  if (ttfb > 300) console.warn(` - Yuqori TTFB (sekin server): ${ttfb.toFixed(2)}ms`);
  if (downloadTime > 500) console.warn(` - Sekin kontent yuklanishi: ${downloadTime.toFixed(2)}ms`);
}

// ... kuzatuvchingiz ichida analyzeNetworkPhases(entry) ni chaqiring ...

            

              
                Copy
              
            
          

Amaliy tushunchalar:

• Yuqori DNS vaqti: Sizning DNS provayderingiz sekin bo'lishi mumkin. Tezroq global provayderga o'tishni o'ylab ko'ring. Shuningdek, muhim uchinchi tomon domenlari uchun DNSni oldindan hal qilish uchun `` dan foydalanishingiz mumkin.
• Yuqori TCP vaqti: Bu ulanishni o'rnatishdagi kechikishni ko'rsatadi. Kontent Yetkazib Berish Tarmog'i (CDN) aktivlarni foydalanuvchiga geografik jihatdan yaqinroq joydan taqdim etish orqali buni kamaytirishi mumkin. `` dan foydalanish ham DNS qidiruvi, ham TCP qo'l siqishini erta bajarishi mumkin.
• Yuqori TTFB: Bu sekin backend'ga ishora qiladi. Ma'lumotlar bazasi so'rovlarini optimallashtirish, server tomonidagi keshlashni yaxshilash yoki server uskunalarini yangilash uchun backend jamoangiz bilan ishlang. `Server-Timing` sarlavhasi bu yerda sizning eng yaxshi do'stingizdir.
• Yuqori yuklash vaqti: Bu resurs hajmi va tarmoq o'tkazuvchanligining funksiyasidir. Aktivni optimallashtiring (siqish, kichraytirish) yoki o'tkazuvchanlikni yaxshilash uchun CDN'dan foydalaning.

Cheklovlar va E'tiborga Olinadigan Jihatlar

Resource Timing API juda kuchli bo'lishiga qaramay, uning ba'zi muhim cheklovlarini bilish kerak.

Boshqa Domendagi Resurslar va `Timing-Allow-Origin` Sarlavhasi

Xavfsizlik sababli, brauzerlar sizning asosiy sahifangizdan farqli domendan (domen, protokol yoki port) yuklangan resurslar uchun mavjud bo'lgan vaqt ma'lumotlarini cheklaydi. Odatiy bo'lib, boshqa domendagi resurs uchun `redirectStart`, `domainLookupStart`, `connectStart`, `requestStart`, `responseStart` kabi ko'pgina vaqt xususiyatlari va `transferSize` kabi hajm xususiyatlari nolga teng bo'ladi.

Ushbu tafsilotlarni ochish uchun resursni joylashtirgan server `Timing-Allow-Origin` (TAO) HTTP sarlavhasini o'z ichiga olishi kerak. Masalan:

Timing-Allow-Origin: * (Har qanday domenga vaqt tafsilotlarini ko'rishga ruxsat beradi)

Timing-Allow-Origin: https://www.your-website.com (Faqat sizning veb-saytingizga ruxsat beradi)

Bu o'z CDN'laringiz yoki boshqa subdomenlardagi API'lar bilan ishlaganda juda muhimdir. To'liq unumdorlik ko'rinishini olish uchun ularning TAO sarlavhasini yuborishga sozlanganligiga ishonch hosil qiling.

Brauzer Qo'llab-quvvatlashi

Resource Timing API, shu jumladan `PerformanceObserver`, barcha zamonaviy brauzerlarda (Chrome, Firefox, Safari, Edge) keng qo'llab-quvvatlanadi. Biroq, eski brauzerlar uchun u mavjud bo'lmasligi mumkin. Eski mijozlarda xatoliklarga yo'l qo'ymaslik uchun kodingizni har doim `try...catch` bloki ichiga o'rang yoki uni ishlatishdan oldin `window.PerformanceObserver` mavjudligini tekshiring.

Xulosa: Ma'lumotlardan Qarorlargacha

Resource Timing API zamonaviy veb-ishlab chiquvchining asboblar to'plamidagi muhim vositadir. U "sayt sekin" kabi noaniq shikoyatlardan "Janubi-Sharqiy Osiyodagi foydalanuvchilar uchun uchinchi tomon chat vidjetimizning TTFB'si 400ms" kabi aniq, ma'lumotlarga asoslangan tashxislarga o'tish uchun zarur bo'lgan xom, donador ma'lumotlarni taqdim etib, tarmoq sharsharasini tushunarli qiladi.

Haqiqiy foydalanuvchi ma'lumotlarini to'plash uchun `PerformanceObserver` dan foydalanib va har bir resursning to'liq hayot siklini tahlil qilib, siz quyidagilarni amalga oshirishingiz mumkin:

• Uchinchi tomon provayderlarini o'z unumdorliklari uchun javobgar qilish.
• Butun dunyo bo'ylab CDN va keshlash strategiyalaringiz samaradorligini tasdiqlash.
• Katta o'lchamdagi rasmlar va optimallashtirilmagan aktivlarni topish va tuzatish.
• Frontend kechikishlarini backend ishlov berish vaqtlari bilan bog'lash.

Tezroq vebga sayohat davomiy. Bugundan boshlang. Brauzeringizning ishlab chiquvchi konsolini oching, ushbu maqoladagi kod parchalarini o'z saytingizda ishga tushiring va sizni uzoq vaqtdan beri kutayotgan boy unumdorlik ma'lumotlarini o'rganishni boshlang. Muhim bo'lgan narsalarni o'lchash orqali siz dunyoning qayerida bo'lishidan qat'i nazar, barcha foydalanuvchilaringiz uchun tezroq, bardoshliroq va yoqimliroq tajribalar yarata olasiz.